<template>
  <header-bar></header-bar>
  <div class="gray-row">
    <div class="text">搜索</div>
  </div>
  <el-autocomplete
      class="inline-input"
      v-model="inputTags"
      :fetch-suggestions="querySearch"
      placeholder="在这里输入你的XP捏"
      :trigger-on-focus="false"
      @select="handleSelect"
      @keyup.enter.native="clickSearchButton"
  ></el-autocomplete>
  <el-button @click="clickSearchButton">🔍</el-button>
  <div id="main-search-holder">
    <div>
      <div>
        <h3>热门tag</h3>
        <div class="hot-tag">
          <div
              class="hot-tag-name"
              v-for="item in hotTag_return.hot_tag"
              @click="clickTag(item.tag_name)"
          >
            🔯{{ item.tag_name }}&ensp;&ensp;
          </div>
        </div>
      </div>
      <div>
        <el-row type="flex" justify="center" align="middle"><h3>随机tag &emsp;</h3>
          <el-button @click="changeRandomTag">刷新</el-button>
        </el-row>

        <div class="hot-tag">
          <div
              class="hot-tag-name"
              v-for="item in randomTag_return.tags"
              @click="clickTag(item.tag_name)"
          >
            🔯{{ item.tag_name }}&ensp;&ensp;
          </div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div v-if="showResult">
      <h3>搜索结果</h3>
      <el-radio-group
          v-model="sorted_type"
          @change="changeHandle"
          v-if="img_info_return && img_info_return.picture_infos.length >= 1"
      >
        <el-radio-button label="随机"></el-radio-button>
        <el-radio-button label="最新"></el-radio-button>
        <el-radio-button label="最赞"></el-radio-button>
      </el-radio-group>
      <SingleImageHolder :imageInfoList="img_info_return.picture_infos"></SingleImageHolder>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onBeforeMount, ref, reactive} from "vue";
import {ElMessage} from "element-plus";
import {getCandidate, getHotTag, getRandomTag, searchFromTags} from "@/api";
import SingleImageHolder from "../components/SingleImageHolder.vue";
import HeaderBar from "@/components/HeaderBar.vue";

const showResult = ref(false);
const sorted_type = ref("随机");
const inputTags = ref("");
const hotTag_return = reactive({
  hot_tag: new Array<{
    tag_name: string;
    count: number;
  }>(),
});

const randomTag_return = reactive({
  tags: new Array<{
    tag_name: string;
  }>(),
});

const img_info_return = reactive({
  picture_infos: new Array<{
    url: string;
    id: number;
    praise: number;
  }>(),
});

const shuffle_array = (arr: any) => {
  let len = arr.length, t, i;
  while (len) {
    i = Math.floor(Math.random() * len--);
    t = arr[len];
    arr[len] = arr[i];
    arr[i] = t;
  }
  return arr;
}

// 挂载前
onBeforeMount(() => {
  getHotTag().then((res) => {
    hotTag_return.hot_tag = res.data.hot_tag;
  });
  getRandomTag().then((res) => {
    randomTag_return.tags = res.data.tags;
  });
});

const changeRandomTag = () => {
  getRandomTag().then((res) => {
    randomTag_return.tags = res.data.tags;
  });
};

const clickTag = (tag: string) => {
  inputTags.value = tag;
  searchFromTags(tag).then((res) => {
    img_info_return.picture_infos = shuffle_array(res.data.picture_infos)
    sorted_type.value = "随机"
    ElMessage.success({
      message: "为您找到" + res.data.picture_infos.length + "张图图！",
      duration: 1000,
      showClose: true,
    });
    showResult.value = true;
  });
};

const clickSearchButton = () => {
  if (inputTags.value.length <= 0) {
    ElMessage.error({
      message: "请输入信息！",
      duration: 1000,
      showClose: true,
    });
  } else {
    searchFromTags(inputTags.value).then((res) => {
      img_info_return.picture_infos = shuffle_array(res.data.picture_infos)
      sorted_type.value = "随机"
      if (res.data.picture_infos.length <= 0) {
        ElMessage.error({
          message: "没有找到相关图片！",
          duration: 1000,
          showClose: true,
        });
      } else {
        ElMessage.success({
          message: "为您找到" + res.data.picture_infos.length + "张图图！",
          duration: 1000,
          showClose: true,
        });
      }
      showResult.value = true;
    });
  }
};
const changeHandle = (value: any) => {
  if (value === "随机") {
    img_info_return.picture_infos = shuffle_array(img_info_return.picture_infos)
  } else if (value === "最新") {
    img_info_return.picture_infos = img_info_return.picture_infos.sort(
        (a: any, b: any) => {
          return b.id - a.id;
        }
    );
  } else if (value === "最赞") {
    img_info_return.picture_infos = img_info_return.picture_infos.sort(
        (a: any, b: any) => {
          return b.praise - a.praise;
        }
    );
  }
};

const querySearch = (keyword: string, cb: any) => {
  getCandidate(keyword).then((res) => {
    cb(
        res.data.tag_candidate.map((item) => {
          return {
            value: item.tag_name + " [" + item.count + "]",
          };
        })
    );
  });
};

const handleSelect = (item: any) => {
  inputTags.value = item.value.split("[")[0].replace(/(^\s*)|(\s*$)/g, "");
};
</script>

<style scoped lang="less">
.gray-row {
  background-color: #f5f5f5;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;

.text {
  font-weight: 700;
}

}
.hot-tag {
  /*margin: 0 auto;*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
